<template>
    <div class="new-message">
        <img :src="article_info.cover" alt="" width="100%">
        <div class="message-content">
            <div class="type-title">
                最新消息
            </div>
            <div class="title">
                {{ article_info.title }}
            </div>
            <div class="author">
                <img src="../images/avatar.webp" alt="">
                <div>
                    <span>{{ article_info.name }}</span>
                    <span class="date">·</span>
                    <span class="date">{{ article_info.created_at }}</span>
                </div>
            </div>
            <div class="content">
                <p>{{ article_info.content }}</p>
                <!-- 标签 -->
                <div class="tag">
                    <div class="tag-title">
                        -标签-
                    </div>
                    <div class="tag-list">
                        <div v-for="item in tagList" :key="item">
                            {{ item }}
                        </div>
                    </div>
                </div>
                <div class="back-btn">
                    <nut-button>返回上层</nut-button>
                    <nut-divider></nut-divider>
                </div>
            </div>

            <div class="likes">
                <div class="likes-title">
                    喜欢这篇文章？
                </div>
                <nut-swiper :loop="false" :width="swiperWidth" :is-prevent-default="false" @change="handleSwiperChange">
                    <nut-swiper-item v-for="(item, index) in
                        article_list" :key="index" style="height: 150px">
                        <div class="swiper-item">
                            <img :src="item.cover" alt="" height="180px" width="100%">
                            <div class="message-text">
                                最新消息
                            </div>
                            <div class="message-title">
                                {{ item.title }}
                            </div>
                            <div class="message-content" :class="{ 'read-more-class': item.readMore }">
                                {{ item.content }}
                            </div>
                            <div v-if="!item.readMore" class="read-more" @click="item.readMore = true">
                                阅读更多
                            </div>
                        </div>
                    </nut-swiper-item>
                </nut-swiper>
            </div>
        </div>

        <div style="position: relative;">
            <div class="prev" @click="handlePrev">
                <rect-left color="#ffffff"></rect-left>
            </div>
            <nut-swiper ref="swiperRef" :loop="false" :is-prevent-default="false" :touchable="false">
                <nut-swiper-item v-for="(item, index) in swiperList" :key="index">
                    <game :game_info="game_info"></game>
                </nut-swiper-item>
            </nut-swiper>
            <div class="next" @click="handleNext">
                <rect-right color="#ffffff"></rect-right>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import banner1 from '../images/banner1.webp'
import banner2 from '../images/banner2.webp'
import Game from './components/Game.vue'
import { RectLeft, RectRight } from '@nutui/icons-vue'
import { axiosService } from '@/http/sever'
import { showNotify } from '@nutui/nutui'
import { useRoute } from 'vue-router'

const route = useRoute()
const tagList = ['最新游戏', 'PC', '巨乳', '策略模拟']

const swiperWidth = computed(() => window.innerWidth - 50)
const currentSwiper = ref(0)
const swiperList = ref([
    {
        img: banner1,
        title: '在Pangea Odyssey的性感世界中崛起、统治和蹂躏一切',
        content: '在神秘的PANGEA ODYSSEY世界中，两个古老的预言决定了这个王国的命运：破坏力极强的魔王的崛起在神秘的PANGEA ODYSSEY世界中，两个古老的预言决定了这个王国的命运：破坏力极强的魔王的崛起',
        readMore: false
    },
    {
        img: banner2,
        title: '在Pangea Odyssey的性感世界中崛起、统治和蹂躏一切',
        content: '在神秘的PANGEA ODYSSEY世界中，两个古老的预言决定了这个王国的命运：破坏力极强的魔王的崛起…',
        readMore: false
    }
])
const handleSwiperChange = (val: number) => {
    currentSwiper.value = val
}
const article_info = ref({})
const article_list = ref([])
const game_info = ref({})

const getDetail = () => {
    axiosService.post('/api/Article/articleDetail', {
        id: route.query.id
    }).then(res => {
        console.log(' 文章详情 -->', res.data)
        article_info.value = res.data.article_info
        article_list.value = res.data.article_list
        game_info.value = res.data.game_info
    }).catch(err => {
        showNotify.danger(err.msg)
    })
}
getDetail()

// 游戏
const swiperRef = ref<any>(null)
const handlePrev = () => {
    swiperRef.value.prev()
}
const handleNext = () => {
    swiperRef.value.next()
}
</script>

<style scoped lang="scss">
.new-message {
    width: 100%;
    min-height: 100vh;
    // background-color: #2a2a2a;
    color: #fff;

    .message-content {
        .type-title {
            font-size: 12px;
            color: #9a9a9a;
            margin: 5px 0;
            padding: 0 10px;
        }

        .title {
            font-size: 24px;
            font-weight: bold;
            line-height: 28px;
            padding: 0 10px;
        }

        .author {
            display: flex;
            align-items: center;
            gap: 18px;
            margin: 15px 0;
            padding: 0 10px;

            img {
                width: 25px;
            }

            div {
                display: flex;
                align-items: center;
                gap: 5px;

                .date {
                    font-weight: bold;
                }
            }
        }

        .content {
            p {
                font-size: 12px;
                line-height: 16px;
                margin: 10px 0;
                padding: 0 10px;
                color: #f2f2f2;
            }

            .con-title {
                font-size: 18px;
                font-weight: bold;
                margin-top: 20px;
                margin-bottom: 10px;
                padding: 0 10px;
            }

            .tag {
                .tag-title {
                    font-size: 18px;
                    font-weight: bold;
                    margin: 10px 0;
                    text-align: center;
                }

                .tag-list {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    padding: 0 10px;
                    gap: 6px;

                    &>div {
                        font-size: 12px;
                        padding: 2px 10px;
                        background-color: #383838;
                        border: 1px solid #fff;
                        border-radius: 99px;
                    }
                }
            }

            .back-btn {
                margin: 20px 0;
                text-align: center;
                padding: 0 10px;

                .nut-button {
                    width: 144px;
                    background: #4960eb;
                    color: #fff;
                    font-weight: bold;
                    border-color: #4960eb;
                    font-size: 16px;
                }
            }
        }

        .likes {
            padding: 0 10px;
            margin: 20px 0;

            .likes-title {
                font-size: 18px;
                font-weight: bold;
                margin: 10px 0;
                text-align: center;
            }

            :deep(.nut-swiper-item) {
                margin: 0 10px;
            }

            .swiper-item {
                .message-text {
                    font-size: 12px;
                    color: #9a9a9a;
                }

                .message-title {
                    font-size: 14px;
                    font-weight: bold;
                    line-height: 16px;
                    margin: 6px 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .message-content {
                    font-size: 12px;
                    line-height: 16px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                }

                .read-more-class {
                    -webkit-line-clamp: unset;
                    line-clamp: unset;
                }
            }

            .read-more {
                width: 91px;
                font-size: 10px;
                color: #fff;
                border: solid 1px #fff;
                border-radius: 99px;
                text-align: center;
                height: 20px;
                line-height: 20px;
                margin: 10px auto;
                z-index: 100;
            }
        }
    }

    .prev {
        position: absolute;
        left: 5px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 100;
    }

    .next {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 100;
    }
}

:deep(.nut-swiper-inner),
:deep(.nut-swiper-item) {
    height: fit-content !important;
}

:deep(.nut-swiper-item) {
    overflow: hidden;
}
</style>
